<template>
	<div class="container-full">
		<div class="regedit-head">
			<h1 class="title">门店信息修改</h1>
		</div>
		<div class="normal-form-container bottom-ash-line">
			<van-field type="tel" v-model="forma.phone" placeholder="请输入手机号（登陆账号）" :error-message="errorMsg.phone" />
			<van-field v-model="forma.password" type="password" placeholder="请输入登录密码（留空为不修改）" />
			<van-field v-model="forma.repassword" type="password" placeholder="请确认登录密码" />
		</div>
		<div class="normal-form-container">
			<van-field v-model="forma.realname" placeholder="请输入联系人姓名" :error-message="errorMsg.realname" class="el-mt-10" />
			<van-field v-model="forma.shopName" placeholder="请输入门店名称" :error-message="errorMsg.shopName" />
			<van-field v-model="forma.address" :error-message="errorMsg.address" placeholder="请输入门店所在详细地址">
				<van-button slot="button" size="small" @click="eventClickMapSelectAddress" type="primary" class="map-button" round>地图选址</van-button>
			</van-field>
			<van-field v-model="area" @click="showArea = true" placeholder="点击选择门店所在地区（省/市/区县）" readonly />
            <van-field v-model="forma.longitude" readonly placeholder="经度" />
            <van-field v-model="forma.latitude" readonly placeholder="纬度" />
		</div>
		<div class="normal-form-button-container el-mt-30">
			<van-button type="primary" size="large" @click="eventClickOperate" class="green-background font-size-17 edge-angle-normal">提交修改</van-button>
		</div>
		<van-popup position="bottom" v-model="showArea">
			<van-area :value="regionCode" :area-list="areaList" @confirm="confirmArea" @cancel="cancelArea" />
		</van-popup>
	</div>
</template>

<script>
    import { Field, CellGroup, Button, Toast, Popup, Area } from 'vant';
    
	import validator from '../../libs/js/validator.js';
	import areaList from '../../libs/js/area';

	export default {
		components: {
			[Field.name]: Field,
			[CellGroup.name]: CellGroup,
			[Button.name]: Button,
			[Area.name]: Area,
			[Popup.name]: Popup
		},
		data() {
			return {
				countdown: 0,
				countdownText: '验证码',
                showArea: false,
                area: '',
				areaList: areaList,
				regionCode: '',
				forma: {
                    uid: '',
					phone: '',
					checkCode: '',
					password: '',
					repassword: '',
					realname: '',
					//name: '',
					shopName: '',
					address: '',
					longitude: '',
					latitude: '',
					province: '',
					city: '',
					area: '',
				},
				errorMsg: {
					phone: '',
					checkCode: '',
					password: '',
					repassword: '',
					realname: '',
					name: '',
					shopName: '',
					area: '',
					address: ''
				},
				rules: {
					phone: [
						{
							validator: (rule, value, callback) => {
								if (!value) {
									callback('请输入手机号码');
								} else if (/^[1][0-9]{10}$/.test(value)) {
									callback();
								} else {
									callback('请输入正确的手机号码');
								}
							}
						}
					],
					checkCode: [
						{ required: true, message: '请输入验证码' }
					],
					password: [
						{ required: true, message: '请输入登录密码' }
					],
					repassword: [
						{ required: true, message: '请输入确认登录密码' }
					],
					//name: [
					//    {required: true, message: '请输入用户名'}
					//],
					realname: [
						{ required: true, message: '请输入联系人姓名' }
					],
					shopName: [
						{ required: true, message: '请输入门店名称' }
					],
					area: [
						{ required: true, message: '请选择门店所在地区' }
					],
					address: [
						{ required: true, message: '请输入门店所在详细地址' }
					],
				},
			}
		},
		created() {
			var forma = JSON.parse(localStorage.getItem('userRegedit'));
			if (forma) {
				this.forma = forma;
				localStorage.removeItem('userRegedit');
			}
            this.validator = validator(this.rules, this.forma);
            
            // console.log('params', this.$route.params);
            if(this.$route.params.oda) {
                let oda = this.$route.params.oda;

                this.forma.uid = oda.id;
                this.forma.phone = oda.phone;

                this.forma.realname = oda.realname;
                this.forma.shopName = oda.zhicheng;
                this.forma.address = oda.address;

                this.regionCode = String(oda.county);

                this.forma.longitude = oda.longitude;
                this.forma.latitude = oda.latitude;
                this.forma.province = oda.province;
                this.forma.city = oda.city;
                this.forma.county = this.regionCode;

                this.area = areaList.province_list[oda.province] + '-' + areaList.city_list[oda.city] + '-' + areaList.county_list[oda.county];
            } else if (this.$route.params.location) {
				this.forma.address = this.$route.params.address;

				let coordinate = String(this.$route.params.location).split(',');
				this.forma.longitude = coordinate[0];
				this.forma.latitude = coordinate[1];
            }
		},
		methods: {
			confirmArea(res) {
				this.showArea = false;
				this.forma.province = res[0].code;
				this.forma.city = res[1].code;
				this.regionCode = res[2].code;
				this.area = res[0].name + '-' + res[1].name + '-' + res[2].name;
			},
			cancelArea() {
				this.showArea = false;
			},
            /**
             * 清除验证提示
             * @param attrs
             */
			resetField(attrs) {
				attrs = !attrs ? Object.keys(this.errorMsg) : (Array.isArray(attrs) ? attrs : [attrs]);
				attrs.forEach(attr => {
					this.errorMsg[attr] = ''
				})
			},
			validate(callback, data) {
				this.validator.validate((errors, fields) => {
					this.resetField();
					if (errors) {
						fields.forEach(item => {
							this.errorMsg[item.field] = item.message
						})
					}
					callback && callback(errors, fields)
				}, data);
			},
			eventClickOperate() {
                var params = {
                    id: this.forma.uid,
                    name: this.forma.phone,  // 此时全部都是手机号
                    realname: this.forma.realname,
                    phone: this.forma.phone,
                    zhicheng: this.forma.shopName,
                    province: this.forma.province,
                    city: this.forma.city,
                    county: this.regionCode,
                    address: this.forma.address,
                    longitude: this.forma.longitude,
                    latitude: this.forma.latitude
                };

                if(this.forma.password) {
                    if(this.forma.password != this.forma.repassword) {
                        this.$toast('两次密码输入不一致');
                        return;
                    }
                }
                console.log(params);
                // return;

				this.validate((errors, fields) => {
					if (errors) {
						this.$util.postRequestInterface('/api/home/user/change', params, (res) => {
							this.$router.push('/salesman/order-shop');
						});
					}
				});
			},
			eventClickMapSelectAddress() {
				window.localStorage.setItem('userRegedit', JSON.stringify(this.forma));
				this.$router.push({
                    path: '/public/map', query: {
                        mode: 'edit',
                        longitude: this.forma.longitude,
                        latitude: this.forma.latitude
                    }
                });
            }
		}
	}
</script>

<style lang = "scss" scoped>
	.regedit-head {
		margin: 3.2rem 1.1rem 1.1rem;
		font-size: 1.6rem;

		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		.title {
			margin: 0rem;
			padding: 0rem;
		}

		.info-tip {
			color: #666666;
			font-size: 1.4rem;
			padding-right: 1rem;
			position: relative;
		}

		.info-tip::after {
			content: "";
			display: block;
			width: 1rem;
			position: absolute;
			top: 0rem;
			bottom: 0rem;
			right: 0rem;
			background-image: url("../../../static/images/arrow-right-ash.png");
			background-repeat: no-repeat;
			background-position: center right;
			background-size: 50% 50%;
		}
	}

	.check-button {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
		background-color: #ccffcc;
		color: #00cc00;
		font-size: 1.3rem;
	}

	.map-button {
		background-color: #00cc00;
		color: #ffffff;
		padding-left: 2rem !important;
		padding-right: 2rem !important;
		font-size: 1.3rem;
	}
</style>
